<template>
    <view>
      <!-- <navbar></navbar> -->
        <!-- 分类tab -->
        <view class="header">
            <scroll-view scroll-x scroll-left="0" class="scroll-menu">
                <view :class="'cs ' + (category_id == 0 ? 'active' : '')" @tap.stop.prevent="onSwitchTab" data-id="0">
                    <text>全部</text>
                </view>
                <!-- 分类列表 -->
                <view
                    :class="'cs ' + (item.category_id == category_id ? 'active' : '')"
                    @tap.stop.prevent="onSwitchTab"
                    :data-id="item.category_id"
                    v-for="(item, index) in categoryList"
                    :key="index"
                >
                    <text>{{ item.name }}</text>
                </view>
            </scroll-view>
        </view>

        <!-- 文章列表 -->
        <view class="article-list">
            <scroll-view @scrolltolower="bindDownLoad" scroll-y :style="'height: ' + scrollHeight + 'px;'">
                <view
                    :class="'article-item show-type__' + item.show_type"
                    @tap.stop.prevent="onTargetDetail"
                    :data-id="item.article_id"
                    v-for="(item, index) in articleList.data"
                    :key="index"
                >
                    <!-- 小图模式 -->

                    <block v-if="item.show_type == 10">
                        <view class="article-item__left flex-box">
                            <view class="article-item__title twolist-hidden">
                                <text class="dis-block f-30 col-f">{{ item.article_title }}</text>
                            </view>
                            <view class="article-item__footer m-top10 category">
                                <text class="article-views f-24 col-f">{{ item.view_time }}</text>
								<view class="category_name">
									{{ item.category.name }}
								</view>
                            </view>
                        </view>
                        <view class="article-item__image">
                            <image mode="widthFix" :src="item.image.file_path"></image>
                        </view>
                    </block>

                    <!-- 大图模式 -->

                    <block v-if="item.show_type == 20">
                        <view class="article-item__title twolist-hidden">
                            <text class="dis-block f-30 col-f">{{ item.article_title }}</text>
                        </view>
                        <view class="article-item__image m-top20">
                            <image mode="widthFix" :src="item.image.file_path"></image>
                        </view>
                        <view class="article-item__footer m-top10">
                            <text class="article-views f-24 col-f">{{ item.view_time }}</text>
                        </view>
                    </block>
                </view>
                <view v-if="no_more" class="no-more f-30">亲, 没有更多了</view>
                <!-- 无数据提供的页面 -->
                <view v-if="!isLoading && !articleList.data.length">
                    <view class="yoshop-notcont">
                        <text class="iconfont icon-wushuju"></text>
                        <text class="cont">暂无内容哦</text>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
import navbar from "@/components/navbar/navbar";
import shortcut from '@/components/shortcut/shortcut';
const app = getApp();
export default {
    components: {
      navbar,
        shortcut
    },
    data() {
        return {
            // 分类列表
            categoryList: [],
            // 文章列表
            articleList: [],
            // 当前的分类id (0则代表首页)
            category_id: 0,
            scrollHeight: null,
            no_more: false,
            // 没有更多数据
            isLoading: true,
            // 是否正在加载中
            page: 1 // 当前页码
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        let that = this; // 设置文章列表高度

        that.setListHeight(); // Api：获取文章首页

        that.getIndexData();
    },
	onShow() {
		let that = this; // 设置文章列表高度
		
		that.setListHeight(); // Api：获取文章首页
		
		that.getIndexData();
		this.getArticleList();
	},
    /**
     * 分享当前页面
     */
    onShareAppMessage() {
        return {
            title: '文章首页',
            path: '/pages/article/index?' + app.getShareUrlParams()
        };
    },
    methods: {
        /**
         * Api：获取文章列表
         */
        getIndexData() {
            let _this = this; // 获取文章首页

            app._get('article/index', {}, function (result) {
                _this.setData({
                    categoryList: result.data.categoryList
                });
            }); // Api：获取文章列表

            _this.getArticleList();
        },

        /**
         * Api：切换导航栏
         */
        onSwitchTab: function (e) {
            let that = this; // 第一步：切换当前的分类id

            that.setData({
                category_id: e.currentTarget.dataset.id,
                articleList: {},
                page: 1,
                no_more: false,
                isLoading: true
            }); // 第二步：更新当前的文章列表

            that.getArticleList();
        },

        /**
         * Api：获取文章列表
         */
        getArticleList(isPage, page) {
            let _this = this;

            app._get(
                'article/lists',
                {
                    page: page || 1,
                    category_id: _this.category_id
                },
                function (result) {
                    let resList = result.data.list;
                    let dataList = _this.articleList;
                    if (isPage == true) {
                        _this.setData({
                            'articleList.data': dataList.data.concat(resList.data),
                            isLoading: false
                        });
                    } else {
                        _this.setData({
                            articleList: resList,
                            isLoading: false
                        });
                    }
                }
            );
        },

        /**
         * 跳转文章详情页
         */
        onTargetDetail(e) {
            uni.navigateTo({
                url: './detail/index?article_id=' + e.currentTarget.dataset.id
            });
        },

        /**
         * 下拉到底加载数据
         */
        bindDownLoad() {
            // 已经是最后一页
            if (this.page >= this.articleList.last_page) {
                this.setData({
                    no_more: true
                });
                return false;
            } // 加载下一页列表

            this.getArticleList(true, ++this.page);
        },

        /**
         * 设置文章列表高度
         */
        setListHeight() {
            let systemInfo = uni.getSystemInfoSync();
            let rpx = systemInfo.windowWidth / 750;
            let // 计算rpx
                tapHeight = Math.floor(rpx * 98);
            let // tap高度
                scrollHeight = systemInfo.windowHeight - tapHeight; // swiper高度
            console.log(systemInfo.windowHeight);
            this.setData({
                scrollHeight
            });
        }
    }
};
</script>
<style lang="scss" scoped>
	page{
		// background-color: #ddf6fa;
	}
/* 顶部选项卡 */
.header {
    display: flex;
    position: fixed;
    top: 0rpx;
    width: 100%;
    height: 88rpx;
    color: $uni-text-color;
    font-size: 28rpx;
    // background: #fff;
    // border-bottom: 1rpx solid #e4e4e4;
    z-index: 100;
    overflow: hidden;
    white-space: nowrap;
    .scroll-menu{
        height: 100%;
        color: $uni-text-color;
		// background-color: #ddf6fa;
    }
}

.header .cs {
    display: inline-block;
    padding: 0 15rpx;
    text-align: center;
    min-width: 20%;
    height: 87rpx;
    line-height: 88rpx;
    box-sizing: border-box;
}

.header .cs text {
    display: block;
    height: 100%;
}

.header .cs.active text {
    color: #000000;
	font-weight: 600;
    border-bottom: 5rpx solid #EE772B;
}

/* 文章列表 */

.article-list {
	// background-color: $uni-bg-color-grey;
    margin-top: 100rpx;
    line-height: 1;
	color: $uni-text-color;
    padding: 0 20rpx;
}

.article-list .article-item {
    margin-bottom: 20rpx;
    padding: 30rpx;
    background: $uni-bg-color;
	border-radius: 20rpx;
}

.article-list .article-item:last-child {
    margin-bottom: 0;
}

.article-list .article-item .article-item__title {
    line-height: 1.3;
}

.article-list .article-item .article-item__image image {
    display: block;
}

/* 小图模式 */

.show-type__10 {
    display: flex;
}

.show-type__10 .article-item__left {
    padding-right: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.show-type__10 .article-item__image image {
    width: 240rpx;
}

/* 大图模式 */

.show-type__20 .article-item__image image {
    width: 100%;
}
.category{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: 26rpx;
	.category_name{
		border: #efeadd 1rpx solid;
		border-radius: 15rpx;
		padding: 5rpx 10rpx;
		background-color: #EE772B;
		opacity: 0.8;
		color: #fff;
	}
}
</style>
